<template>
	<view id="app">
		<u-search :placeholder="placeholder" v-model="keyword" @custom='search'></u-search>
		<u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>

		<u-tabs :list="secondLevel" :is-scroll="true" :current="secondLevelpitch" @change="secondLevelchange"></u-tabs>
	</view>
</template>

<script>
	export default {
		name: 'bilihaerder',
		data() {
			return {
				keyword: '',
				placeholder: '',
				list: [],
				current: 0,
				secondLevel: [],
				secondLevelpitch: 0,
				pitchon: {},
				stair: {},
			}
		},
		props: {
			objData: '',
		},
		watch: {
			objData(NewVal, val) {
				const {
					data,
					regionTags
				} = NewVal;
				this.list = regionTags;
				this.placeholder = data.show_name
			}
		},
		onLoad() {
			let _this = this;
		},
		methods: {
			change(index) {
				// index = index+1
				this.stair = this.list[index]
				let sindx = this.list[index]['blocks'];
				console.log(this.stair, sindx);
				this.pitchon.classify = this.list[index]
				this.secondLevel = sindx
				this.current = index;
				this.$emit('stair', this.stair)
				// this.$emit('acctevt',this.list[index])
			},
			secondLevelchange(index) {
				let {
					key,
					name
				} = this.secondLevel[index];
				this.pitchon.key = key
				this.pitchon.name = name
				this.pitchon.index = index
				this.secondLevelpitch = index;
				this.$emit('acctevt', this.pitchon)
			},
			search(val) {
				this.$emit('click', val);
			}
		}
	}
</script>

<style scoped lang="less">
	.box {
		width: 100%;
		height: 240rpx;
		border-bottom: 2px solid #f9f9f9;
		display: flex;
		padding: 4rpx;

		:nth-child(1) {
			width: 40%;

			img {
				width: 95%;
				height: 95%;
				text-align: center;
			}

		}

		:nth-child(2) {
			width: 60%;

			// background:#007AFF;
			view {
				width: auto;
				height: 50rpx;
			}

			.msgtxt {
				font-size: 28rpx;
				font-weight: 800;
				line-height: 50rpx;
			}

			.txt {
				color: rgb(141, 141, 141);
			}
		}
	}
</style>
